import React, { useCallback } from 'react';
import { Link } from 'react-router-dom';
import { renderRoutes } from 'react-router-config';
import { connect } from 'react-redux';
import { Button } from 'antd';
import DrawButton from '../components/DrawButton';

function A({ route, global }) {
  const openReactMicroModal = useCallback(() => {
    React.$setGlobalState({ modalReactMicro: true });
  }, []);
  return (
    <div>
      这是react主应用页面 <br />
      <Link to="/a/b">go-->react主用b路由（跳purehtml微应用）</Link>
      <br />
      <Link to="/a/c">go-->react主用c路由（跳vuemicro微应用 =》再跳reactmicro微应用）</Link>
      <br />
      <Link to="/a/d">go-->react主用d路由（跳reactmicro微应用）</Link>
      <br />
      <DrawButton />
      &nbsp;
      <Button onClick={openReactMicroModal}>打开reactmicro的对话框</Button>
      {renderRoutes(route.routes)}
      {/* 实现从vuemicro跳reactmicro，需要提前加载用于加载reactmico的containerD容器,不然找不到会报错 */}
      <div id="containerD"></div>
    </div>
  );
}

export default connect((state) => {
  return {
    global: state.global,
  };
})(A);
